import Vue from 'vue'
import Vuex from 'vuex'
import { getItem, setItem } from '@/utils/storage'
import { getPostList } from '@/api/article'
Vue.use(Vuex)
const USER_KEY = 'Blog_USER'
export default new Vuex.Store({
  state: {
    user: getItem(USER_KEY),
    postLoaded: null,
    blogHTML: "在这写下你的博客吧",
    blogTitle: "",
    blogPhotoName: "",
    blogPhotoFileURL: null,
    profileEmail: true,
    blogPhotoPreview: null, //是否展现图片
    profileUsername: null,
    editPost: null,
    blogPosts:[],
    blogPostsFeed:[]
  },
  getters: {
    blogPostsFeed(state) {
      return state.blogPosts.slice(0, 2);
    },
    blogPostsCards(state) {
      return state.blogPosts.slice(2, 6);
    },
  },
  mutations: {
    setUser(state, userInfo){
      state.user = userInfo
      setItem(USER_KEY, state.user)
    },
    openPhotoPreview(state) { //是否展现图片
      state.blogPhotoPreview = !state.blogPhotoPreview;
    },
    newBlogPost(state, payload) {
      state.blogHTML = payload;
    },
    updateBlogTitle(state, payload) {
      state.blogTitle = payload;
    },
    fileNameChange(state, payload) {
      state.blogPhotoName = payload;
    },
    createFileURL(state, payload) {
      state.blogPhotoFileURL = payload;
    },
    toggleEditPost(state, payload) {
      state.editPost = payload;
    },
    setBlogState(state, payload) {
      state.blogTitle = payload.blogTitle || ''
      state.blogHTML = payload.blogHTML || '在这写下你的博客吧'
      state.blogPhotoFileURL = payload.blogCoverPhoto || ''
      state.blogPhotoName = payload.blogCoverPhotoName || ''
    },
    filterBlogPost(state, payload) {
      state.blogPosts = state.blogPosts.filter((post) => post.blogID !== payload);
    },
    updateUser(state, payload) {
      state.user = payload;
    },
    changeUsername(state, payload) {
      state.profileUsername = payload;
    }
  },
  actions: {
    async getPost( {state} ) {
      state.blogPosts = []
      // 如果没有登陆
      if(!state.user){
        const { data } = await getPostList()
        data.articles.forEach(article => {
          const blogInfo = {
            blogID: article._id,
            blogHTML: article.body,
            blogTitle: article.title,
            blogDate: article.creatAt,
            blogCoverPhoto: article.image
          }
          state.blogPosts.push(blogInfo);
        });
        state.postLoaded = true;
        return
      }
      const { data } = await getPostList({
        author: state.user._id
      })
      // 如果登陆了
      data.articles.forEach(article => {
        const blogInfo = {
          blogID: article._id,
          blogHTML: article.body,
          blogTitle: article.title,
          blogDate: article.creatAt,
          blogCoverPhoto: article.image
        }
        state.blogPosts.push(blogInfo);
      });
      state.postLoaded = true;
    },
    async updatePost({ commit }, payload) {
      commit("filterBlogPost", payload);
    },
    deletePost({ commit }, payload) {
      commit("filterBlogPost", payload);
    }
  },
  modules: {

  }
})
